<template>
  <a-layout-content class="flex flex-row flex-1 overflow-hidden flex-nowrap">
    <MenuSider multi-graph />
    <Scrollbar class="w-full" wrap-class="m-10" view-class="flex flex-col gap-y-10">
      <div>
        <div :style="{ zoom: editorState.zoom }" v-for="row in editorState.menu.menus" :key="row.key">
          <div class="flex flex-nowrap gap-x-6" v-if="row.children?.length">
            <div
              :id="`canvas-${col.key}`"
              class="flex flex-col cursor-pointer gap-y-1"
              @click="enterSingleGraphMode(col.key, row.key)"
              v-for="col in row.children"
              :key="col.key"
            >
              <span :class="editorState.menu.selectedKey === col.key ? 'text-[#0171EF]' : 'text-[#D4D5D8]'">
                {{ col.title }}
              </span>
              <CanvasView :type="col.key" />
            </div>
          </div>
          <div class="flex flex-nowrap" v-else>
            <div
              :id="`canvas-${row.key}`"
              class="flex flex-col cursor-pointer gap-y-1"
              @click="enterSingleGraphMode(row.key, undefined)"
              :key="row.key"
            >
              <span :class="editorState.menu.selectedKey === row.key ? 'text-[#0171EF]' : 'text-[#D4D5D8]'">
                {{ row.title }}
              </span>
              <CanvasView :type="row.key" />
            </div>
          </div>
        </div>
      </div>
    </Scrollbar>
  </a-layout-content>
</template>

<script setup lang="ts">
import Scrollbar from '@cms/scrollbar'
import { watch } from 'vue'
import { editorState, enterSingleGraphMode } from '../mixins/useEditorState'
import MenuSider from './MenuSider.vue'
import CanvasView from './CanvasView.vue'

watch(
  () => editorState.menu.selectedKey,
  (v) => {
    setTimeout(() => {
      const canvasEl = document.getElementById(`canvas-${v}`)
      canvasEl?.scrollIntoView({
        behavior: 'smooth'
      })
    }, 200)
  },
  { immediate: true }
)
</script>

<style scoped></style>
